<template>
	<view>
		<!-- <swiper style="height: 300rpx;" autoplay circular>
			<swiper-item>
				<view style="width: 100%;height: 300rpx;background-color: red;">1</view>
			</swiper-item>
			<swiper-item>
				<view style="width: 100%;height: 300rpx;background-color: blue;">2</view>
			</swiper-item>
		</swiper> -->

		<view class="game-container">
			<view class="energy">剩余能量: {{ energy }}</view>
			<view v-if="currentQuestion">
				<view class="displayQuestion">{{currentQuestion.id}}. {{ displayQuestion }}</view>

				<view class="options">
					<view v-for="(option, index) in currentQuestion.options" :key="index" class="option"
						@click="selectOption(index)" :class="{ selected: selectedOption === index }">{{ option }}</view>
				</view>

				<button class="submit-btn" @click="submitAnswer" :disabled="selectedOption === null">
					提交答案{{autoText}}
				</button>

				<view v-if="showFeedback" class="feedback">
					<view v-if="isCorrect" class="correct">✓ 回答正确！</view>
					<view v-else class="wrong">✗ 回答错误！</view>
					<view class="explanation">{{ currentQuestion.explanation }}</view>
				</view>
			</view>

			<view v-else class="game-over">
				<view style="text-align: center;margin-top: 20px;">您的最终得分: {{ score }}</view>
				<button style="margin-top: 20px;" @click="resetGame">重新开始</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	const energy = ref(30) // 剩余能量值，初始为5
	const score = ref(0) //当前得分
	const currentQuestionIndex = ref(0) // 当前题目索引
	const selectedOption = ref(null) // 玩家当前选择的选项索引（null表示未选择）
	const showFeedback = ref(false) // 是否显示答题反馈
	const isCorrect = ref(false) //当前答题是否正确
	// 题目数组
	const questions = [{
			id: 1,
			question: '一__一意',
			options: ['行', '孤', '心', '寸'],
			answer: 2,
			explanation: '一心一意：形容心思、意念专一。'
		},
		{
			id: 2,
			question: '三__二意',
			options: ['想', '头', '思', '心'],
			answer: 3,
			explanation: '三心二意：形容犹豫不决或意志不坚定。'
		},
		{
			id: 3,
			question: '五__四海',
			options: ['湖', '洲', '洋', '江'],
			answer: 0,
			explanation: '五湖四海：指全国各地或世界各地。'
		},
		{
			id: 4,
			question: '七下八__',
			options: ['下', '上', '左', '右'],
			answer: 0,
			explanation: '七上八下：形容心神不定。'
		},
		{
			id: 5,
			question: '九__一毛',
			options: ['马', '羊', '牛', '猪'],
			answer: 2,
			explanation: '九牛一毛：比喻极大数量中极微小的数量。'
		},
		{
			id: 6,
			question: '十__十美',
			options: ['满', '分', '足', '全'],
			answer: 3,
			explanation: '十全十美：形容十分完美，毫无缺陷。'
		},
		{
			id: 7,
			question: '千__万化',
			options: ['换', '改', '变', '转'],
			answer: 2,
			explanation: '千变万化：形容变化非常多。'
		},
		{
			id: 8,
			question: '万__更新',
			options: ['象', '物', '事', '景'],
			answer: 0,
			explanation: '万象更新：形容事物或景象都变得焕然一新。'
		},
		{
			id: 9,
			question: '一__风顺',
			options: ['路', '帆', '船', '马'],
			answer: 1,
			explanation: '一帆风顺：比喻非常顺利，毫无挫折。'
		},
		{
			id: 10,
			question: '一__千金',
			options: ['话', '言', '语', '诺'],
			answer: 3,
			explanation: '一诺千金：形容说话算数，极有信用。'
		},
		{
			id: 11,
			question: '一__见血',
			options: ['刀', '针', '剑', '枪'],
			answer: 1,
			explanation: '一针见血：比喻说话直截了当，切中要害。'
		},
		{
			id: 12,
			question: '一__不染',
			options: ['污', '灰', '土', '尘'],
			answer: 3,
			explanation: '一尘不染：形容非常清洁或人品高洁。'
		},
		{
			id: 13,
			question: '一__了然',
			options: ['看', '眼', '目', '望'],
			answer: 2,
			explanation: '一目了然：形容一眼就能看清楚。'
		},
		{
			id: 14,
			question: '一__孤行',
			options: ['意', '心', '己', '我'],
			answer: 0,
			explanation: '一意孤行：指不接受别人的劝告，顽固地按照自己的主观想法去做。'
		},
		{
			id: 15,
			question: '一__惊人',
			options: ['叫', '鸣', '喊', '吼'],
			answer: 1,
			explanation: '一鸣惊人：比喻平时没有突出的表现，一下子做出惊人的成绩。'
		},
		{
			id: 16,
			question: '一__两得',
			options: ['趟', '次', '回', '举'],
			answer: 3,
			explanation: '一举两得：做一件事得到两方面的好处。'
		},
		{
			id: 17,
			question: '一__三折',
			options: ['曲', '折', '波', '弯'],
			answer: 0,
			explanation: '一波三折：原指写字笔法的曲折多变，现比喻文章的结构起伏曲折或事情进行中意外的变化很多。'
		},
		{
			id: 18,
			question: '一知__解',
			options: ['晓', '懂', '明', '半'],
			answer: 3,
			explanation: '一知半解：知道得不全面，理解得不透彻。'
		},
		{
			id: 19,
			question: '一__风顺',
			options: ['路', '帆', '船', '马'],
			answer: 1,
			explanation: '一帆风顺：比喻非常顺利，毫无挫折。'
		},
		{
			id: 20,
			question: '一诺__金',
			options: ['语', '言', '千', '话'],
			answer: 3,
			explanation: '一诺千金：形容说话算数，极有信用。'
		},
		{
			id: 21,
			question: '三__五除二',
			options: ['下', '刀', '斧', '拳'],
			answer: 0,
			explanation: '三下五除二：形容做事干脆利索。'
		},
		{
			id: 22,
			question: '四__八稳',
			options: ['方', '平', '周', '面'],
			answer: 1,
			explanation: '四平八稳：形容说话、做事稳当。'
		},
		{
			id: 23,
			question: '五__四散',
			options: ['花', '分', '零', '星'],
			answer: 2,
			explanation: '五花四散：形容分散零落。'
		},
		{
			id: 24,
			question: '六__无主',
			options: ['心', '神', '魂', '魄'],
			answer: 1,
			explanation: '六神无主：形容心慌意乱，不知所措。'
		},
		{
			id: 25,
			question: '七__八舌',
			options: ['语', '口', '言', '嘴'],
			answer: 3,
			explanation: '七嘴八舌：形容人多口杂。'
		},
		{
			id: 26,
			question: '八__过海',
			options: ['佛', '神', '仙', '圣'],
			answer: 2,
			explanation: '八仙过海：比喻各有各的本领。'
		},
		{
			id: 27,
			question: '九霄__外',
			options: ['空', '天', '云', '霄'],
			answer: 2,
			explanation: '九霄云外：形容极远的地方。'
		},
		{
			id: 28,
			question: '十__九稳',
			options: ['把', '抓', '握', '拿'],
			answer: 3,
			explanation: '十拿九稳：比喻很有把握。'
		},
		{
			id: 29,
			question: '百__百中',
			options: ['射', '发', '击', '弹'],
			answer: 1,
			explanation: '百发百中：形容射击准确。'
		},
		{
			id: 30,
			question: '千__一律',
			options: ['篇', '文', '章', '律'],
			answer: 0,
			explanation: '千篇一律：形容文章、说话等老一套。'
		}
	]
	// 当前题目对象
	const currentQuestion = computed(() => {
		return energy.value > 0 || energy.value == 0 && currentQuestionIndex.value < questions.length ?
			questions[currentQuestionIndex.value] :
			null
	})
	// 显示题目（已选择则显示填空结果）
	const displayQuestion = computed(() => {
		if (!currentQuestion.value) return ''
		return selectedOption.value !== null ?
			currentQuestion.value.question.replace('__', currentQuestion.value.options[selectedOption.value]) :
			currentQuestion.value.question
	})

	function selectOption(index) {
		selectedOption.value = index
		showFeedback.value = false
	}

	function submitAnswer() {
		if (autoText.value != '') return
		// console.log('只有为空才能往下走')
		
		// 每次提交都扣减1点能量
		energy.value -= 1

		isCorrect.value = selectedOption.value === currentQuestion.value.answer
		showFeedback.value = true

		if (isCorrect.value) {
			autoCode()
			
			score.value += 1

			// 2秒后自动进入下一题
			setTimeout(() => {
				nextQuestion()
			}, 2000)
		}else{
			if(score.value==0) return
			score.value -= 1
		}
	}

	function nextQuestion() {
		currentQuestionIndex.value += 1
		selectedOption.value = null
		showFeedback.value = false

		// 能量耗尽时结束
		if (energy.value <= 0) {
			currentQuestionIndex.value = questions.length
		}
	}

	function resetGame() {
		energy.value = 30
		score.value = 0
		currentQuestionIndex.value = 0
		selectedOption.value = null
		showFeedback.value = false
	}
	
	const autoText = ref('')
	function autoCode() {
		let time = 2
		autoText.value = `(${time}s)`
		let timer = setInterval(() => {
			time--
			autoText.value = `(${time}s)`
	
			if (time == 0) {
				clearInterval(timer)
				autoText.value = ""
			}
		}, 1000)
	}
</script>

<style>
	@import "index.css"
</style>